<template>
  <div class="login">
    <video ref="videoPlayer" class="bg" :src="videoSrc" muted autoplay loop></video>
    <div class="boxs">
      <div class="login_avatar"><el-avatar :src="loginForm.face" /></div>
      <div class="login_form">
        <el-form :model="loginForm">
          <el-form-item label="" prop="phone">
            <el-input style="--el-input-border-radius:10px;" prefix-icon="User" v-model="loginForm.phone"
              placeholder="请输入您的账号" @change="istrue">
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input style="--el-input-border-radius:10px;" type="password" v-model="loginForm.password"
              placeholder="请输入您的密码" prefix-icon="Lock"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="border-radius: 10px;" type="primary" @click="logins">登录</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue'
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus';
// import request from '@/../utils/request'
import axios from 'axios'

const loginForm = reactive({
  phone: '',
  password: '',
  face: '',
  id: ''
})
const videoSrc=ref('https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr')
const router = useRouter();
const logins = () => {
  const phones = /^1[3-9]\d{9}$/
  if (loginForm.password === '' && loginForm.phone == '') {
    ElMessage.error("请填写信息")
  } else {
    if (phones.test(loginForm.phone)) {
      axios.post('http://localhost:3001/login/logins', loginForm).then(res => {
        if (res.data.code == 200) {
          const userId = loginForm.id
          const phone = loginForm.phone
          const password = loginForm.password
          const imgs = loginForm.face
          if (userId) {
            localStorage.setItem('userId', userId)
            localStorage.setItem('accessToken', res.data.token)
            localStorage.setItem('refreshToken', res.data.tokens)
            localStorage.setItem('imgs', imgs)
            // 跳转到首页面
            router.push('/home')
          }
          ElMessage.success("登录成功")
        }
        else if (res.data.code == 201) {
          ElMessage.error("账号或密码不正确")
        }
      })
    } else {
      ElMessage.error("手机号格式不正确")
    }
  }
}
const istrue = () => {
  axios.get('http://localhost:3001/login/userLogin?phone=' + loginForm.phone).then(res => {
    // console.log(res,'res')
    if (res.data.code == 200) {
      loginForm.face = res.data.datas.face
      loginForm.id = res.data.datas._id
      loginForm.phone = res.data.datas.phone
    }
  })
    .catch(error => {
      console.log(error, 'error')
    })
}



</script>


<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.login {
  width: 100vw;
  height: 100vh;
  // background-image: url('../../assets/6.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.bg {
  position: fixed;
  /* 视频绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  /* 宽度占据整个屏幕 */
  height: 100%;
  /* 高度占据整个屏幕 */
  object-fit: fill;
  /* 填满整个容器，可能会裁剪视频 */
}

.boxs {
  background-color:rgba(0, 0, 0, 0.6);
  box-shadow: '0px 0px 8px rgba(0, 0, 0, 0.2)';
  position: fixed;
  width: 450px;
  height: 600px;
  border-radius: 1vw;
  right: 8vw;
  top: 260px;
  padding: 20px;
  box-sizing: border-box;

  .login_avatar {
    width: 370px;
    margin: 0 auto;
    height: 110px;
    position: relative;

    .el-avatar {
      width: 30%;
      height: 100%;
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  }

  .login_form {
    width: 100%;
    height: 50%;
    margin-top: 50px;
    .el-form {
      height: 100%;
      padding: 10px;
      box-sizing: border-box;

      .el-form-item {
        width: 100%;
        height: 70px;
        margin-bottom: 20px;

        .el-form-item__content {
          width: 100%;

          .el-input {
            width: 100%;
            height: 80%;

            .el-input__wrapper {}

            .el-input__inner {
              margin-bottom: 30px;
            }
          }
        }
      }

      .el-button {
        width: 100%;
        height: 80%;
        border-radius: 5px;
        font-size: 18px;

      }
    }
  }






  .wang {
    font-size: 14px;
    color: gray;
    position: fixed;
    bottom: 12vw;
    right: 10vw;
  }



  .last {
    margin-left: 25vw;
  }

  .demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
}</style>
